<template>
  <div class="singTanal secondary-page-mode">
        <div class="secondary-toolbar">
           <span>时间选择 : </span>
           <div class="layoutBox" style="width:242px">
              <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期"
              end-placeholder="结束日期"></el-date-picker>
           </div>&emsp;&emsp;
           <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
        </div>
        <div class="currency-mode-wrap">
          <div class="echartbox" id="echartbox"> </div>
          <div class="table-box" style="height: calc(100% - 320px);">
            <el-table border height="100%" :data="tableData">
              <el-table-column
                type="index"
                width="40">
              </el-table-column>
              <el-table-column
                prop="stationname"
                label="站点名称">
              </el-table-column>
              <el-table-column
                prop="date"
                label="日期">
              </el-table-column>
              <el-table-column
                prop="logtime"
                label="在线时长(分钟)">
              </el-table-column>
              <el-table-column
                prop="offtime"
                label="离线时长(分钟)">
              </el-table-column>
              <el-table-column
                prop="offcs"
                label="离线次数">
              </el-table-column>
              <el-table-column
                prop="allb"
                label="累计流量(B)">
              </el-table-column>
            </el-table>
          </div>
        </div>
       
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange: "", //页面时间的v-model
      tableData: [
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        },
        {
          date: "2019-02-23 00:00",
          mn: "A421100_2006",
          stationname: "兰溪大桥",
          status: "在线",
          time: "2019-02-19 10:02	",
          logtime: "11126",
          offtime: "13",
          offcs: "188",
          allb: "57925165"
        }
      ]
    };
  },
  created() {
    this.$store.commit("setShowlefttree", true);
  },
  mounted(){
    this.$nextTick(()=>{
       this.initEchart()
    })
  },
  methods: {
    initEchart() {
      var colors = ["#297EFF", "#00A3F5", "#1CAD8B"];
      var option = {
        color: colors,
        title: {
          text: "通信状态统计图",
          x: 'center',
          y: 10
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          bottom: 70,
          top: 75,
          left:100,
          right:80
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100,
          }
        ],
        legend: {
          data: ["累计流量", "在线时长", "掉线时长"],
          x: 'center',
          y:40
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#cccccc"
              }
            },
            axisLabel:{
              color:'#666666'
            },
            data: [
              "2019/02/16 0时",
              "2019/02/18 0时",
              "2019/02/20 0时",
              "2019/02/22 0时"
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#cccccc"
              }
            },
            axisTick: {
              show: false,
            },
            axisLabel:{
              color:'#666666'
            }
          },
          {
            type: "value",
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#cccccc"
              }
            },
            axisTick: {
              show: false,
            },
            axisLabel:{
              color:'#666666'
            }
          }
        ],
        series: [
          {
            name: "累计流量",
            type: "line",
            smooth: true,
            data: [10000000, 8000000, 400000, 100000]
          },
          {
            name: "在线时长",
            type: "line",
            yAxisIndex: 1,
            smooth: true,
            data: [1500, 1200, 600, 200]
          },
          {
            name: "掉线时长",
            type: "line",
            yAxisIndex: 1,
            smooth: true,
            data: [600, 300, 500, 1000]
          }
        ]
      };
      //初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("echartbox"));

      //使用制定的配置项和数据显示图表
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped lang='less'>
.singTanal {
  .currency-mode-wrap{
    border: 1px solid #d9e6f7;
    padding: 6px;
  }
  .echartbox{
    height: 300px;
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>
